<template>
  <el-table
    :data="table.data"
    class="table-vm"
    height="700"
    maxHeight="700"
    :size="table.size"
    @selection-change="handleSelectionChange"
    :stripe="table.stripe"
    :border="table.border"
    v-loading="table.loading"
  >
    <!-- 多选 -->
    <el-table-column
      v-if="table.hasSelect"
      :align="table.align"
      type="selection"
      width="55"
    >
    </el-table-column>
    <!-- 展开行 -->
    <el-table-column type="expand" v-if="table.hasExpand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="table-expand">
          <el-button
            v-for="item in table.expands"
            :key="item.id"
            plain
            type="primary"
            size="mini"
            @click="expandClick(item.label, props.$index, props.row)"
            v-text="item.title"
          />
        </el-form>
      </template>
    </el-table-column>
    <template v-for="col in table.tHead">
      <el-table-column
        v-if="col.show !== false && col.show === 'template'"
        :align="table.align"
        :prop="col.prop"
        :key="col.id"
        :label="col.label"
        :width="col.width ? col.width : ''"
        :min-width="col.minWidth ? col.minWidth : ''"
        :sortable="table.sortable !== undefined ? table.sortable : true"
      >
        <template slot-scope="scope">
          <slot :name="col.prop" :obj="scope" />
        </template>
      </el-table-column>
      <el-table-column
        v-else-if="col.show !== false && col.show !== 'template'"
        :align="table.align"
        :prop="col.prop"
        :key="col.id"
        :label="col.label"
        :width="col.width ? col.width : ''"
        :min-width="col.minWidth ? col.minWidth : ''"
        :sortable="table.sortable !== undefined ? table.sortable : true"
      >
      </el-table-column>
    </template>
    <!-- 自定义操作 -->
    <el-table-column
      column-key="operation"
      :fixed="table.fixed"
      :align="table.align"
      v-if="table.hasOperation"
      :label="table.operation.label"
      :width="table.operation.width ? table.operation.width : ''"
      :min-width="table.operation.minWidth ? table.operation.minWidth : ''"
      :class-name="table.operation.className"
    >
      <template slot-scope="scope">
        <span
          class="handle-btn"
          v-for="item in table.operation.data"
          :key="item.id"
        >
          <el-button
            v-if="item.Fun !== 'handleDel'"
            :class="item.classname ? item.classname : ''"
            :size="item.size"
            :type="item.btnType"
            @click="handleOperation(scope.$index, scope.row, item.id)"
            v-text="item.label"
            plain
          />
          <el-popover
            v-else
            placement="bottom"
            v-model="visible['visible' + scope.row.id]"
          >
            <p style="text-align: center; margin-top: 0; color:#f56c6c">
              确定删除吗？
            </p>
            <div style="text-align: center">
              <el-button
                size="mini"
                @click="visible['visible' + scope.row.id] = false"
                v-text="'取 消'"
                plain
              />
              <el-button
                type="danger"
                size="mini"
                v-text="'确 定'"
                @click="handleOperation(scope.$index, scope.row, item.id)"
                plain
              />
            </div>
            <el-button
              slot="reference"
              :class="item.classname ? item.classname : ''"
              :size="item.size"
              :type="item.btnType"
              v-text="item.label"
              @click="handleVidible(scope.row.id)"
              plain
            />
          </el-popover>
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "Table",
  props: {
    table: {
      type: Object,
      default() {
        return {
          hasMergeRowOrColumn: false, // 是否合并单元格
          loading: false, // 加载中动画
          hasShowSummary: false, // 是否显示表位合计行
          border: false, // 是否带有纵向边框，默认为false
          hasSelect: false, // 有无选中功能
          hasOperation: false, // 有无操作功能
          hasExpand: false, // 有无展开行功能
          sortable: true, // 是否开启排序
          size: mini, // 表格大小 medium / small / mini
          align: "left", // 文字对齐方式  left / center / right
          stripe: false, // 是否隔行变色 turn / false
          fixed: false, // 是否锁定操作列 false / right
          tHead: [
            {
              id: "1",
              label: "label",
              prop: "prop",
              className: "className",
              width: "",
              minWidth: "80",
              show: true
            }
          ],
          data: [],
          operation: {
            label: "操作",
            width: "200",
            className: "",
            data: [
              {
                label: "编辑",
                Fun: "handleEdit",
                id: "1",
                size: "small",
                className: "show"
              }
            ]
          }
        };
      }
    }
  },
  data() {
    return {
      multipleSelection: [],
      visible: {}
    };
  },
  created() {
    // console.log(this.table.operation.data)
    // console.log('是否排序', this.table)
    // console.log('table', this.table.data)
  },
  methods: {
    handleOperation(index, row, id) {
      this.visible["visible" + row.id] = false;
      const data = this.table.operation.data;
      for (let i = 0; i < data.length; i++) {
        if (id === data[i].id) {
          this.$emit(data[i].Fun, index, row, id);
          // console.log(data[i].Fun, index, row)
        }
      }
    },
    filterHandler(value, row, column) {
      // console.log(column)
      const property = column["property"];
      return row[property] === value;
    },
    // 展开行内部按钮方法
    expandClick(obj, index, row) {
      this.$emit("expandList", obj, index, row);
    },
    // 多选行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("getOrderData", val);
      // console.log("this.multipleSelection :", this.multipleSelection);
    },
    handleVidible(id) {
      this.visible["visible" + id] = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.table-vm {
  /deep/ .el-table__header thead tr th {
    background: #fafafa;
  }
  .table-expand {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
.handle-btn {
  margin-left: 10px;
  &:first-child {
    margin-left: 0;
  }
}
</style>
